﻿<template>
  <l-layout class="l-tab-page" v-if="!lr_loadPage">
    <template #left>
      <l-panel style="padding-right: 0">
        <template #title>
          {{ $t("表单分类") }}
          <div class="tree-setting-btn">
            <el-tooltip effect="dark" :content="$t('分类管理')" placement="top">
              <el-button @click="handleSettingClick" type="text" icon="el-icon-setting"></el-button>
            </el-tooltip>
          </div>
        </template>
        <el-tree class="learun-tree" v-loading="treeLoading" :data="treeData" default-expand-all
          :expand-on-click-node="false" @node-click="handleNodeClick">
          <span class="lr-tree-node" slot-scope="{ node }">
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>

    <l-panel style="padding-left: 0">
      <template #toolLeft>
        <l-query2 :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
          <template #f_Name>
            <el-input v-model="queryData.f_Name" :placeholder="$t('请输入')" />
          </template>
          <template #f_Code>
            <el-input v-model="queryData.f_Code" :placeholder="$t('请输入')" />
          </template>
        </l-query2>
      </template>
      <template #toolRight>
        <l-tool-btns :hasTableSetting="true" @setting="lr_handleSettingTable" @click="handleAdd()">
          <l-excel-btns></l-excel-btns>
        </l-tool-btns>
      </template>
      <l-table ref="mainTable" :loading="tableLoading" :columns="lr_getPageColumns(columns)" :dataSource="tableData"
        :isPage="true" :pageTotal="tableTotal" :tablePage.sync="tableCurrentPage" @loadPageData="turnTablePage">
        <template v-for="(col, index) in lr_tableColumnsByToLabel(
          lr_getPageColumns(columns)
        )" v-slot:[col.prop]="scope">
          <l-value-to-label :value="scope.row[col.prop]" :type="col.dataType" :code="col.dataCode"
            :valueKey="col.valueKey" :labelKey="col.labelKey" :options="col.options" :format="col.format"
            :setting="col.setting" :key="index"></l-value-to-label>
        </template>
        <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-panel>

    <!--表单-->
    <l-dialog :isStep="true" :steps="['基本配置', '数据配置']" :stepActive.sync="stepActive" :validateSteps="handleValidateSteps"
      :title="$t(formTitle)" :visible.sync="formVisible" :height="600" :width="800" @ok="handleSave"
      @close="handleCloseForm" @opened="handleOpenedForm">
      <my-form ref="form" :stepActive="stepActive"></my-form>
    </l-dialog>

    <l-drawer :title="$t('分类管理')" :visible.sync="classifysVisible" :showOk="false" :showClose="false" :width="800">
      <l-dataitem-index classifyCode="ReportSort"></l-dataitem-index>
    </l-drawer>

    <l-fullscreen-dialog :title="`${$t('报表预览')}`" :visible.sync="previewVisible" :showOk="false" @opened="previewOpened">
      <my-preview ref="MyPreview"></my-preview>
    </l-fullscreen-dialog>
  </l-layout>
</template>

<script>
import MyForm from "./form";
import MyPreview from "./preview";
const api = window.$api.report.scheme;

export default {
  components: {
    MyForm,
    MyPreview,
  },
  data() {
    return {
      // 打印参数
      lr_isPage: true,
      lr_isAuth: true,

      moduleCode: "report_scheme",

      stepActive: 0,
      // 左侧树形数据参数
      treeLoading: false,
      treeCategory: "",
      classifysVisible: false,

      // 查询参数
      queryData: {
        f_Name: "",
        f_Code: "",
      },

      queryItems: [
        { label: this.$t("报表名称"), prop: "f_Name" },
        { label: this.$t("报表编号"), prop: "f_Code" },
      ],

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        {
          label: "报表编号",
          prop: "f_Code",
          width: 120,
          align: "left",
          dataType: "input",
        },
        {
          label: "报表名称",
          prop: "f_Name",
          minWidth: 120,
          align: "left",
          dataType: "input",
        },
        {
          label: "报表分类",
          prop: "f_TempCategory",
          width: 100,
          align: "left",
          dataType: "dataItem",
          dataCode: "ReportSort",
        },
        {
          label: "报表风格",
          prop: "f_TempStyle",
          width: 80,
          align: "center",
          dataType: "mydata",
          options: [
            { value: "1", label: "列表" },
            { value: "2", label: "图表" },
            { value: "3", label: "混合" },
          ],
        },
        {
          label: "报表介绍",
          prop: "f_Description",
          minWidth: 120,
          align: "left",
          dataType: "textarea",
        },
      ],
      tableBtns: [
        { prop: "Preview", label: this.$t("预览"),width:50 },
        { prop: "Edit", label: this.$t("编辑"),width:40 },
        { prop: "Delete", label: this.$t("删除"),width:40 },
      ],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,

      previewVisible: false,
    };
  },
  computed: {
    // 左侧树形数据参数
    treeData() {
      return this.lr_dataItemTree(this.lr_dataItem["ReportSort"]);
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.lr_loadDataItem("ReportSort");
      this.loadTableData();
    },
    handleSettingClick() {
      this.classifysVisible = true;
    },
    handleNodeClick(node) {
      this.treeCategory = node.value;
      this.loadTableData(true);
    },

    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_Id";
      queryData.f_TempCategory = this.treeCategory;
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },

    handleValidateSteps() {
      return this.$refs.form.validateSteps();
    },

    handleAdd() {
      this.formEdit = false;
      this.handleShowForm("新增报表");
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.handleShowForm("编辑报表");
    },
    handlePreview($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.previewVisible = true;
    },

    handleDelete($index, row) {
      this.$confirm(
        this.$t("此操作将永久删除该数据, 是否继续?"),
        this.$t("提示"),
        {
          confirmButtonText: this.$t("确定"),
          cancelButtonText: this.$t("取消"),
          type: "warning",
        }
      )
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.remove(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("删除成功!"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消删除!"),
          });
        });
    },

    async handleSave(showLoading, hideLoading) {
      showLoading("保存数据中...");
      if (await this.$refs.form.validateForm()) {
        const res = await this.$refs.form.saveForm({
          keyValue: this.formEdit ? this.formEditRow.f_Id : "",
          isEdit: this.formEdit,
        });
        if (res) {
          const msg = this.formEdit ? this.$t("更新成功!"): this.$t("新增成功!");
          this.$message({
            type: "success",
            message: this.$t(msg),
          });
          this.loadTableData();
          this.formVisible = false;
        }
      }
      hideLoading();
    },

    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("加载数据中...");
        await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id });
        hideLoading();
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },

    async previewOpened(showLoading, hideLoading) {
      showLoading("加载数据中...");
      await this.$refs.MyPreview.init(this.formEditRow.f_Id, true);
      hideLoading();
    },
  },
};
</script>
